<template>
    <div ref="linedom" class="line">

    </div>
</template>
<script>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
export default {
    methods:{
      initChart() {
  var myChart = echarts.init(this.$refs.linedom);
  var option;
  option = {
    title: {
      text: '{a|}商户付费统计面板',
      show:true,
      left: 20,
      top: 10,
      textStyle:{
        fontFamily:'幼圆',
        rich:{
          a:{
                  height:15,
                  width:15,
                backgroundColor: {
                //   height:150,
                //   width:150,
                  image: require('/src/assets/login.jpg')
                }
          }
      }
      }

    },  
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['体重', '体脂率', '体水分率', '肌肉量', 'BMI']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
    },
    yAxis: {
      type: 'value',
        splitLine :{
          lineStyle:{
             type:'dashed'
          }
      }
    },
    series: [
      { 
        smooth: true,
        name: '3月',
        type: 'line',
        stack: 'Total',
        data: [80, 82, 86, 88, 90, 99, 85]
      },
      {  
        smooth: true,
        name: '4月',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  }
  myChart.clear()//
  myChart.resize()
   myChart.setOption(option);
},

    },
    mounted(){
        this.initChart()
        window.addEventListener('resize', this.initChart)  
    }

}
</script>
<style lang="less" scoped>
.line {
    height: 100%;
    width: 100%;
    // background-color: aqua;
}

</style>